<script setup>
  defineProps({
    title: {
      required: true,
      type: String
    }
  })
</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="title">
        <span>{{ title }}</span>
        <slot name="extra"></slot>
      </div>
    </template>
    <!-- 主题部分 -->
    <slot></slot>
  </el-card>
</template>

<style lang="scss" scoped>
  .page-container {
    z-index: 100;
    min-height: 100%;
    box-sizing: border-box;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
</style>
